import React, { Component } from 'react'
import { Flex, WingBlank, WhiteSpace, Toast } from 'antd-mobile'

import { Link } from 'react-router-dom'

// 导入 API
import { API } from '../../utils/api.js'

import NavHeader from '../../components/NavHeader'

import styles from './index.module.css'

// 从 formik 中导入 withFormik 高阶组件
import { withFormik, Form, Field, ErrorMessage } from 'formik'

// 导入 Yup
import * as yup from 'yup'

// 验证规则：
const REG_UNAME = /^[a-zA-Z_\d]{5,8}$/
const REG_PWD = /^[a-zA-Z_\d]{5,12}$/

class Login extends Component {
  state = {
    username: '', // 账号用户名
    password: '' // 密码
  }

  render() {

    return (
      <div className={styles.root}>
        {/* 顶部导航 */}
        <NavHeader className={styles.navHeader}>账号登录</NavHeader>
        <WhiteSpace size="xl" />

        {/* 登录表单 */}
        <WingBlank>
          <Form>
            <div className={styles.formItem}>
              <Field
                className={styles.input}
                name="username"
                placeholder="请输入账号"
              />
            </div>
            {/* 长度为5到8位，只能出现数字、字母、下划线 */}
            {/* {
              errors.username && touched.username && (
                <div className={styles.error}>{errors.username}</div>
              )
            } */}
            <ErrorMessage className={styles.error} name="username" component="div" />
            <div className={styles.formItem}>
              <Field
                className={styles.input}
                name="password"
                type="password"
                placeholder="请输入密码"
              />
            </div>
            {/* 长度为5到12位，只能出现数字、字母、下划线 */}
            {/* {
              errors.password && touched.password && (
                <div className={styles.error}>{errors.password}</div>
              )
            } */}

            <ErrorMessage className={styles.error} name="password" component="div" />

            <div className={styles.formSubmit}>
              <button className={styles.submit} type="submit">
                登 录
              </button>
            </div>
          </Form>
          <Flex className={styles.backHome}>
            <Flex.Item>
              <Link to="/registe">还没有账号，去注册~</Link>
            </Flex.Item>
          </Flex>
        </WingBlank>
      </div>
    )
  }
}

// 使用 withFormik 将 Login 组件进行包裹 
export default withFormik({
  // 提供状态，提供需要获取到对应表单的 value 值
  mapPropsToValues: () => ({ username: '', password: '' }),

  validationSchema: yup.object().shape({
    // 要求必须是一个字符类型，而且是一个必填项，需要对用户输入的值使用校验规则进行校验，如果不通过，显示后面的提示
    username: yup.string().required('账号是必填项').matches(REG_UNAME, '长度为5到8位，只能出现数字、字母、下划线'),
    password: yup.string().required('密码是必填项').matches(REG_PWD, '长度为5到12位，只能出现数字、字母、下划线')
  }),

  // 表单的提交事件
  handleSubmit: async (values, { props }) => {
    const { username, password } = values

    const { data: res } = await API.post('/user/login', { username, password })

    if (res.status !== 200) {
      Toast.info('登录失败，请检查用户名或密码')

      return
    }

    localStorage.setItem('hkzf_token', res.body.token)

    if(!props.location.state) {
      props.history.go(-1)
    } else {
      props.history.replace(props.location.state.from.pathname)
    }
    
  }
})(Login)
